// 监测报警 - 处理详情页
<template>
  <f7-page class="detail common-page has-bottom-btns">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="chevron_left" force></f7-link>
      </f7-nav-left>
      <f7-nav-title>监测报警</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <div class="common-page-content">
      <div class="content-box" style="display: block;">
        <div class="process-box-main">
          <img width="46"
            :src="require(`../../../../assets/img/qzjx/${controlData.property.equipmentType ? controlData.property.equipmentType : 'empty'}.png`)"
            class="left-box">
          <div class="right-box">
            <div class="title-box">
              <h3>{{ controlData.property.propertyCode || '--' }}</h3>
              <div class="tag tag-yellow">{{ models.model.pstatus | DictItem(controlData.alarmHandleStatusList) }}</div>
            </div>
            <p>设备类型：{{ controlData.property.equipmentType | DictItem(controlData.equipmentTypes) }}</p>
          </div>
        </div>
        <div class="content-bottom">
          <div class="right-box">
            <p class="info-item-container" v-for="item in baseInfoOption" :key="item.key">
              <span class="info-item-label">{{ item.label }}</span>
              <span class="info-item-content">{{ getValue(item.key) || '--' }}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 施工单位或指派单位可进行填写 -->
      <v-accordion v-if="canEdit" title="报警处理" class="infoList">
        <van-form ref="form" input-align="right">
          <van-field
            name="radio"
            required
            label="是否指派终端设备企业回复"
            label-width="auto"
            :rules="[{ required: true, message: '请输入' }]"
          >
            <van-radio-group @change="handleChangeAssign" slot="input" v-model="models.handleTask.isAssign" direction="horizontal" :disabled="!(canEdit && taskCode === 'usertask2')">
              <van-radio v-for="(item, index) in assignList" :key="index" :name="item.code">{{ item.name }}</van-radio>
            </van-radio-group>
          </van-field>
          <div class="process-info-tag" v-if="models.handleTask.isAssign === 0">
            <div class="tag-content">{{ controlData.terminalUnitName || '' }} - {{ controlData.terminalUnitCreatePerson || '' }} - {{ controlData.terminalUnitCreatePhone || '' }}</div>
          </div>
          <!-- 如果是施工单位阶段，选择了是，则不需要再填写以下内容了 -->
          <template v-if="canEdit && (taskCode === 'usertask2' && models.handleTask.isAssign === 0) || (taskCode !== 'usertask2')">
            <van-field
              class="textarea-field"
              v-model="models.handleTask.alarmReason"
              label="报警原因"
              required
              :rules="[{ required: true }]"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入"
            ></van-field>
            <van-field
              class="textarea-field"
              v-model="models.handleTask.handleContent"
              label="处理备注"
              required
              :rules="[{ required: true }]"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入"
            ></van-field>
            <van-field label="附件">
              <qm-file-upload
                slot="input"
                :galleryOptions="{ multiple: true, maximum: 9 }"
                :params="{ type:'attach', dataKey: models.handleTask.taskId, bizType: 'OTHER' }">
              </qm-file-upload>
            </van-field>
          </template>
        </van-form>
      </v-accordion>
      <v-accordion title="报警记录" class="infoList">
        <v-workflow-list :data="controlData.taskList" userName="handlerName" time="handlerTime">
          <template slot-scope="{ row }">
            <!-- 施工单位 -->
            <template v-if="row.taskCode === 'usertask2'">
              <template v-if="!row.isAssign">
                <div class="workflow-content">
                  <div>报警原因：{{ row.alarmReason || '--' }}</div>
                  <div>处理备注：{{ row.handleContent || '--' }}</div>
                </div>
                <qm-file-list v-if="row.attachmentList.length" :isDefaultFile="true" :defaultFiles="row.attachmentList"></qm-file-list>
              </template>
              <div class="workflow-content" v-else>指派给{{ controlData.terminalUnitName }}回复</div>
            </template>
            <!-- 指派单位 -->
            <template v-else-if="row.taskCode === 'usertask3'">
              <div class="workflow-content">
                <template v-if="row.isAssign">
                  <div>报警原因：{{ row.alarmReason || '--' }}</div>
                  <div>处理备注：{{ row.handleContent || '--' }}</div>
                </template>
                <template v-else>
                  {{ row.handleContent || '--' }}
                </template>
              </div>
              <qm-file-list v-if="row.attachmentList.length" :isDefaultFile="true" :defaultFiles="row.attachmentList"></qm-file-list>
            </template>
            <!-- 监理 -->
            <template v-else-if="row.taskCode === 'usertask4'">
              <div class="workflow-content">
                {{ row.handleContent || '--' }}
              </div>
            </template>
          </template>
        </v-workflow-list>
      </v-accordion>
      <!-- 底部按钮 -->
      <f7-toolbar position="bottom" no-shadow class="fff" v-if="pageAction == 'edit'">
        <f7-button v-if="canBack" fill class="submit-btn plain-btn" @click="fnBack">退回</f7-button>
        <f7-button fill class="submit-btn" @click="fnSubmit">{{ taskCode === 'usertask4' ? '通过' : '提交' }}</f7-button>
      </f7-toolbar>
    </div>
    <!-- 审核意见 -->
    <v-popup-opinion v-model="showPinion" :selectUser="selectUser" ref="opinion" @save="savePinion"></v-popup-opinion>
    <!-- 审核意见 end -->
  </f7-page>
</template>

<script>
import _ from 'lodash'
import controller from "@/libs/framework/workflowController"
export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      model: [
        '/workflow/serviceGuideExt/getEntityByCode',
        '/app/equipment/blackBoxAlarmHandle/workflow/getWorkflowViewModel',
      ]
    }
  }
  onInit() { }
  onBeforeQuery(type, conditions, params) { }
  onAfterQuery(type, isSuccess, result) {
    if (type === 'form') {
      if(result.controlData.progress) {
        this.context.taskCode = result.controlData.progress.taskCode
      }
    }
    return result;
  }
  mixin() {
    return {
      data() {
        return {
          showPinionType: 'pass', // pass-通过、back-退回
          showPinion: false,
          // 基本信息内容展示配置
          baseInfoOption: [
            { label: '所属工程：', key: 'controlData.engineeInfo.engineeName' },
            { label: '工程地址：', key: 'controlData.engineeInfo.engineeAddress' },
            { label: '施工单位：', key: 'controlData.engineeInfo.constructionName' },
            { label: '项目经理：', key: 'controlData.engineeInfo.xmjlNameAndMobile' },
            { label: '报警内容：', key: 'models.model.alarmContent' },
            { label: '最新报警时间：', key: 'models.model.lastAlarmTime' },
          ],
          /**
           * 监测报警 --> 施工单位反馈 --> [ 指派单位反馈（若施工单位指派给其他单位）] --> 监理审核
           * usertask2 - 施工单位
           * usertask3 - 指派单位
           * usertask4 - 监理
           */
          taskCode: '',
          selectUser: {
            selectComment: null,
            comment: null,
            comments: [],
            tran: [],
            activity: '',
            users: [],
          },
          controlData: {
            property: {},
            engineeInfo: {}
          },
          models: {
            model: {},
            handleTask: {}
          },
          pageAction: '',
          assignList: [
            { name: '是', code: 1 },
            { name: '否', code: 0 },
          ],
          fileList: []
        }
      },
      computed: {
        // 是否可以编辑表单
        canEdit() {
          return this.pageAction === 'edit' && (this.taskCode === 'usertask2' || this.taskCode === 'usertask3')
        },
        // 是否可以退回
        canBack() {
          return this.pageAction === 'edit' && (this.taskCode === 'usertask3' || this.taskCode === 'usertask4')
        }
      },
      methods: {
        getValue(key) {
          return _.get(this, key) || '--'
        },
        // 切换是否指派时清空填写的值
        handleChangeAssign() {
          this.models.handleTask.alarmReason = ''
          this.models.handleTask.handleContent = ''
        },
        // 提交
        fnSubmit() {
          this.showPinionType = 'pass'
          if (this.canEdit) {
            this.$refs.form.validate().then(async (_) => {
              this.showPinion = this.taskCode === 'usertask4'
            })
              .catch((err) => {
                console.log(err);
                this.$toast('请填写必填项！')
              })
          } else {
            this.showPinion = this.taskCode === 'usertask4'
          }
          if (this.showPinion === false) {
            // 直接执行
            this.savePinion()
          }
        },
        // 退回
        fnBack() {
          this.showPinionType = 'back'
          this.showPinion = true
        },
        savePinion() {
          if (this.showPinionType === 'pass') {
            // 通过
            this.showPinion = false
            this.send();
          } else if (this.showPinionType === 'back') {
            // 退回
            this.super.fnBackward(
              this.selectUser.comment,
              (result) => {
                this.$f7.preloader.hide();
                if (result.success) {
                  this.showPinion = false
                  this.refreshData('退回成功')
                } else {
                  this.$f7.dialog.alert(result.message)
                }
              },
              (e) => {
                console.log('退回失败---', e);
                this.$f7.preloader.hide();
              }
            )
          }
        },
        refreshData(msg) {
          this.$f7.dialog.alert(msg, () => {
            this.$f7.popup.close();
            this.$f7.views.current.router.back({force:true})
          })
        },
      },
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');

@{deep}.page-content {
  background: #F7F9FC;
}
@{deep} .v-workflow-list {
  padding: 0 16px;
}

.common-page {
  /deep/ .accordion {
    background: #fff;
    margin-top: 10px !important;
  }
}

.process-box-main {
  display: flex;
  border-bottom: 1px solid #E9ECF0;
  padding-bottom: 10px;
}

.process-info-tag {
  padding: 0 16px;

  .tag-content {
    background-color: #f6f8fa;
    padding: 6px 10px;
  }
}

.info-item-container {
  display: flex;
  .info-item-label {
    color: #8995AC !important;
  }
  .info-item-content {
    flex: 1;
    color: #404040 !important;
  }
}

.workflow-content {
  background-color: #F5F7FA;
  padding: 4px 10px;
  line-height: 24px;
  border-radius: 4px;
  margin-top: 8px;
}
</style>
